﻿@using thousandClear.Areas.Shop.Models;
@model MessageModel
<div id="app">
    <div class="ui-flex bg-white ui-box" style="padding: 10px 5%;">
        <div class="col33 font-16" v-on:tap="back">返回</div>
        <div class="col33">&nbsp;</div>
        <div class="col33">
            <div style="width: 60%; background: white; color:#6cc9eb; margin-left: 35%; text-align:center; line-height: 25px;  border: 1px solid #6cc9eb; border-radius: 10px; height: 25px;" v-on:tap="Publish">发送</div>
        </div>
    </div>
    <div class="border"></div>
    <div class="ui-flex bg-white ui-box" style="padding: 10px 5%;">
        <textarea placeholder="说点什么..." style="width: 100%;  font-size: 16px; display: block; height: 100px; outline: none; border: none; line-height: 44px;" v-model="PartyMemo"></textarea>
        <div class="border"></div>

        <!--微信上传图片-->
        <div class="addImg">
            <img id="UploadImage_0" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_1" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_2" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_3" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_4" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_5" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_6" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_7" style="display:none;margin:2px;" class="col20" />
            <img id="UploadImage_8" style="display:none;margin:2px;" class="col20" />
        </div>
        <img v-if="addable" src="~/Statics/Images/shop/message/add.png" class="col20 add" id="btnADD" />
        <div class="ui-flex ui-box" style="color: #bbbbbb;">最多可以上传九张图片</div>
    </div>

    <div class="border"></div>
    <div class="ui-flex  ui-box" style="background: #f8feff; color: #333333; padding: 10px 5%;">
        <div class="col80" style="line-height: 31px;">是否匿名</div>
        <div class="col20"><span class="on" data-type="Name" v-on:tap="TurnName"></span></div>
    </div>
    <div class="border"></div>
    <div class="ui-flex  ui-box" style="padding: 10px 5%;">
        <div class="col20"><span class="TrunPersonal"></span></div>
        <div class="col20"><span class="TrunCircle"></span></div>
    </div>
    <div class="ui-flex  ui-box" style="padding: 5px 5% 10px 5%;color: #bbbbbb;font-size:10px">
        <span>(您可点击微信右上角菜单进行分享和转发)</span>

    </div>
    <div class="ui-flex" style="height: 40px;"></div>
    <div v-if="showMoel" class="font-blue" style="position: fixed; width: 100%; height: 100%; left: 0; z-index:100; top: 0; background: gray;">
        <div style="position: absolute; width: 80%; height: 300px; left: 10%; z-index:1000; top: 100px; background: white; border-radius: 10px;">
            <span class="close" v-on:tap="close"></span>
            <div style="margin-top: 100px;"><div class="TrueText">&nbsp;&nbsp;发布成功</div></div>
        </div>
    </div>
    <div>
        <form id="form" method="post">
            <input type="hidden" v-bind:value="data" name="data" />
        </form>
    </div>
</div>



@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")
    <style>
        .TrunPersonal {
            width: 44px;
            height: 44px;
            display: block;
            background: url("../../Statics/Images/shop/message/send.png");
            background-size: cover;
        }

        .TrunCircle {
            width: 44px;
            height: 44px;
            display: block;
            background: url("../../Statics/Images/shop/message/share.png");
            background-size: cover;
        }

        .on {
            width: 52px;
            height: 31px;
            display: block;
            background: url("../../Statics/Images/shop/message/on.png");
            background-size: cover;
        }

        .close {
            width: 22px;
            height: 22px;
            display: block;
            background: url("../../Statics/Images/shop/message/close.png");
            background-size: cover;
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .off {
            width: 52px;
            border: none;
            height: 31px;
            display: block;
            background: url("../../Statics/Images/shop/message/off.png");
            background-size: cover;
        }

        .TrueText {
            color: #4eb548;
            text-align: center;
            font-size: 38px;
        }

            .TrueText:before {
                content: '';
                width: 30px;
                height: 30px;
                display: inline-block;
                background-image: url(../../Statics/Images/shop/message/finish.png);
                background-size: cover;
                z-index: 100;
            }

        .add {
            margin-left: 3%;
            margin-top: 10px;
        }

        .true {
            width: 38px;
            height: 38px;
            display: block;
            background: url("../../Statics/Images/shop/message/finish.png");
            background-size: cover;
        }

        .AreaList {
            background: #f8feff;
        }

            .AreaList li {
                margin-top: 10px;
            }

        .border {
            width: 100%;
            height: 1px;
            background: url("../../Statics/Images/shop/message/border.png");
        }
    </style>
}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>

        var WxJSReady = false;
        var PictureMediaID = "";
        var model = new Vue({
            el: '#app',
            data: {
                PartyMemo: '',
                noname: '1',
                OpenId: '@ViewBag.OpenId',
                showMoel: false,
                addable: true,
                mediaID: ""
            },
            computed: {
                data: function () {
                    var self = this._data;
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                back: function () {
                    window.location.replace("./Wall?openid=@ViewBag.OpenId");
                },
                TurnName: function () {
                    var self = this;
                    var TurnName = $("span[data-type=Name]");
                    if (self.noname == 1) {
                        TurnName.addClass("off");
                        TurnName.removeClass("on");
                        this.noname = 2;
                    }
                    else if (self.noname == 2) {
                        TurnName.addClass("on");
                        TurnName.removeClass("off");
                        this.noname = 1;
                    }

                },
                Publish: function () {
                    var self = this;
                    if (this.PartyMemo == "") {
                        alert("评论不能为空！");
                        return;
                    }
                    $.ajax({
                        type: "POST",
                        data: { data: self.data },
                        url: "../Message/publishMessage",
                        success: function (data) {
                            self.showMoel = true;
                            var t = setTimeout(function () {
                                window.location.href = "./Wall?openid=@ViewBag.OpenId";
                                clearTimeout(t);
                            }, 1000)
                        }
                    });
                },
                close: function () {
                    window.location.replace("./Wall?openid=@ViewBag.OpenId");
                },
                showError: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "error",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },
                showSuccess: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "success",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                }

            },
            init: function () {
                var postData = { sURL: window.location.href.split('#')[0] };
                $.post("GetJSTicket", {
                    data: JSON.stringify(postData)
                }, function (data) {
                    if (data != null && data != "") {
                        var o = JSON.parse(data);
                        var rtn = JSON.parse(data);
                        console.log(o);
                        if (rtn.err != undefined) {
                            alert(rtn.err);
                            return;
                        }
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: rtn.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                            timestamp: rtn.timestamp, // 必填，生成签名的时间戳
                            nonceStr: rtn.nonceStr, // 必填，生成签名的随机串
                            signature: rtn.signature, // 必填，签名，见附录1
                            jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                    }
                    else {
                        alert("数据异常！");
                    }
                })
            }
        })
        function test(obj) {
            return $("#txtImgUrl" + obj).click();
        };
        $(function () {
            $(".add").each(function () {
                $(this).height($(this).width() + "px");
            });
            wx.ready(function () {
                WxJSReady = true;
            });

            wx.error(function (res) {
                alert("JSSKD Error：" + res.errMsg);
            });
            function ChoosePicture_Multiple() {

                if (WxJSReady == false) {
                    alert("尚未准备好上传图片，请稍等");
                    return;
                }

                wx.chooseImage({
                    count: 9,
                    success: function (res) {

                        for (var i = 0; i < 9; i++)
                            $("#UploadImage_" + i).hide();
                        PictureMediaID = '';

                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                        UploadSingleImage(localIds, 0);
                    },
                    fail: function (res) {
                        writeObj(res);
                    }
                });
            }

            function UploadSingleImage(localIds, i) {
                wx.uploadImage({
                    localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {

                        var serverId = res.serverId; // 返回图片的服务器端ID

                        $("#UploadImage_" + i).show();
                        document.getElementById("UploadImage_" + i).src = localIds[i];

                        PictureMediaID = PictureMediaID + "," + serverId;

                        if (i + 1 < localIds.length)
                            UploadSingleImage(localIds, i + 1);
                        else {
                            model._data.mediaID = PictureMediaID
                            alert('上传图片成功');
                        }

                    },
                    fail: function (res) {
                        alert('upload fail');
                        writeObj(res);

                    }
                });
            }

            function writeObj(obj) {
                var description = "";
                for (var i in obj) {
                    var property = obj[i];
                    description += i + " = " + property + "\n";
                }
                alert(description);
            }
            $('#btnADD').click(function () {
                if (getImgCount >= 9) {
                    alert("上传图片最多9张");
                    return;
                }
                ChoosePicture_Multiple();
            })
            function getImgCount() {
                if (PictureMediaID.length > 2) {
                    var _temp = PictureMediaID.substr(1, PictureMediaID);
                    var list = _temp.split(',');
                    return list.length;
                }
                return 0;
            }
        });
       

    </script>
}